<script setup lang="ts">
import {onBeforeMount} from "vue";
import {queryWebInfo} from "@/api/system";
import type {ISysWebsite} from "@/types";
import {useWebInfoStore} from "@/stores/webInfo.ts";

const webInfo = useWebInfoStore();
onBeforeMount(() => {
  queryWebInfo().then((res) => {
    const webInfoData: any | null = {};
    const arr = res.data as ISysWebsite[]
    if (arr.length > 0) {
      arr.forEach((item) => {
        if (item.keyName) {
          webInfoData[item.keyName] = item.settingValue
        }
      })
    }
    webInfo.setWebInfo(webInfoData)
  })
})

</script>

<template>
  <router-view/>
</template>

<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.main-box-margin {
  margin: 18px;
}


.app-table {
  margin: 18px;
}

.app-table-main {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.app-table-search-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 18px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.app-table-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #303133;
}

.app-table-title:before {
  content: '';
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  vertical-align: center;
  height: 16px;
  width: 5px;
  line-height: 18px;
  margin-right: 10px;
  background-color: var(--el-color-primary);
}

.app-table-search-bar-label {
  font-size: 14px;
  color: #303133;
  margin-bottom: 10px;
  font-weight: bold;
  display: inline-block;
  width: 70px;
  padding-right: 10px;
  text-align: right;
}

.app-table-search-bar-input {
  width: 200px;
}

.app-table-action-bar {
}

.app-table-content {
  margin-top: 17px;
  margin-bottom: 20px;
  width: 100%;
  /*  height: calc(100vh - 438px);
    min-height: 300px;*/
}

.app-table-page {
  display: flex;
  justify-content: flex-end;
}

</style>
